<template>
	<div class="screenfull-box" @click="click">
		<el-icon :size="24" color="#eee">
			<FullScreen />
		</el-icon>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from 'vue';
	import { ElMessage } from 'element-plus';
	import screenfull, { Screenfull } from 'screenfull'; //全屏
	import { FullScreen } from '@element-plus/icons-vue'; // 引入 Edit 图标

	export default defineComponent({
		components: { FullScreen },
		name: 'Screenfull',
		data() {
			return {
				isFullscreen: false
			};
		},
		mounted() {
			this.init();
		},
		beforeUnmount() {
			this.destroy();
		},
		methods: {
			click() {
				if (!screenfull.isEnabled) {
					ElMessage({
						message: 'you browser can not work',
						type: 'warning'
					});
					return false;
				}
				screenfull.toggle();
				return false;
			},
			change() {
				this.isFullscreen = (screenfull as Screenfull).isFullscreen;
			},
			init() {
				if (screenfull.isEnabled) {
					screenfull.on('change', this.change);
				}
			},
			destroy() {
				if (screenfull.isEnabled) {
					screenfull.off('change', this.change);
				}
			}
		}
	});
</script>

<style scoped>
	.screenfull-box {
		display: flex;
		justify-content: center;
		width: 20px;
		margin: 0 20px;
		cursor: pointer;
	}

	.el-icon-full-screen {
		font-size: 20px;
	}
</style>